import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../pages/Home.vue";
import About from "../pages/About.vue";
import News from "../pages/News.vue";
import Message from "../pages/Message.vue";
import Detail from "../pages/Detail.vue";


Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: '/about'
  },
  {
    path: "/home",
    component: Home,
    // 路由多级嵌套
    children: [
      {
        path: "/",
        redirect: 'message'
      },
      {
        // 子级路由不要加斜杠
        path: "news",
        //使用占位符声明接收params参数
        // name:"xinwen",
        component: News
      },
      {
        //使用占位符声明接收params参数
        path: "message",
        component: Message,
        // 第三级子路由
        children: [{
          path: 'detail',
          // path: 'detail/:id/:title',
          component:Detail,
          name:"xiangqing",
          /* 
          // 第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
          props:{
            a:"1",b:"2"
          },

          // 第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件,
	        props:true, */
          
          // 第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件,
          props(route){
            // console.log(route);
            return {
              id:route.query.id,
              title:route.query.title,
              a:"1",
              b:"2"
            }
          }
        }]
      }
    ]
  },
  {
    path: "/about",
    component: About
  }
]

const router = new VueRouter({
  routes: routes
})

export default router